import React, { Fragment, useEffect, useState } from "react";
import index from "./index.css";
import SizeList from "../SizeList/SizeList";
import Content from "../Content/Content";
import ShoppingCar from "../ShoppingCar/ShoppingCar";

export default function TotalBox() {
  const [allDataList, setAllDataList] = useState([]);
  const [count, setCount] = useState();
  const [itemValue, setValue] = useState([]);
  useEffect(() => {
    fetch("products.json", { method: "get" })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setAllDataList(data.products);
        setCount(data.products.length);
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  }, []);
  const Array = allDataList.map((item) => {
    return item.availableSizes;
  });
  let mergedArr = Array.reduce((acc, cur) => acc.concat(cur), []);
  const finalListData = [...new Set(mergedArr)];

  const handleChildValue = (childValue) => {
    setValue(childValue);
  };
  return (
    <Fragment>
      <div className="myBox">
        <ShoppingCar itemValue={itemValue} />
        <SizeList finalListData={finalListData} />
        <Content
          count={count}
          allDataList={allDataList}
          handleChildValue={handleChildValue}
        />
      </div>
      ;
    </Fragment>
  );
}
